<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>SVG结合CSS3实现的一套动画表情DEMO演示</title>

<link rel="stylesheet" href="css.css">

</head>
<body>
<h1 style="color: #ffcc4d;">你好骚啊,哈哈哈哈</h1>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

<div class="wrapper">
  
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;"
    xml:space="preserve" version="1.1" id="svg2">
    
    <metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,38 38,38 38,0 0,0 0,38 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10"><g id="head_5"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(36,19)" id="g20"><path id="path22" style="fill:#ffcc4d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-9.389 -7.611,-17 -17,-17 -9.388,0 -17,7.611 -17,17 0,9.388 7.612,17 17,17 C -7.611,17 0,9.388 0,0"/></g><g transform="translate(29.457,19.2031)" id="g24"><path id="path26" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.059,0.135 -1.499,3.297 -4.457,3.297 -2.957,0 -4.397,-3.162 -4.457,-3.297 -0.092,-0.207 -0.032,-0.449 0.144,-0.591 0.175,-0.142 0.426,-0.147 0.611,-0.014 0.012,0.009 1.262,0.902 3.702,0.902 2.426,0 3.674,-0.881 3.702,-0.901 0.088,-0.066 0.194,-0.099 0.298,-0.099 0.11,0 0.221,0.037 0.312,0.109 C 0.032,-0.452 0.093,-0.208 0,0"/></g><g transform="translate(17.457,19.2031)" id="g28"><path id="path30" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.06,0.135 -1.499,3.297 -4.457,3.297 -2.957,0 -4.397,-3.162 -4.457,-3.297 -0.092,-0.207 -0.032,-0.449 0.144,-0.591 0.176,-0.142 0.427,-0.147 0.61,-0.014 0.013,0.009 1.262,0.902 3.703,0.902 2.426,0 3.674,-0.881 3.702,-0.901 0.088,-0.066 0.194,-0.099 0.298,-0.099 0.11,0 0.221,0.037 0.312,0.109 C 0.033,-0.452 0.092,-0.208 0,0"/></g><g transform="translate(32,20.9995)" id="g32"><path id="brow_5" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.396,0 -0.772,0.238 -0.929,0.629 -2.707,5.074 -7.151,6.01 -7.196,6.02 -7.737,6.128 -8.089,6.655 -7.98,7.196 -7.872,7.738 -7.346,8.087 -6.804,7.98 -6.578,7.936 -1.248,6.812 0.929,1.372 1.134,0.859 0.884,0.277 0.371,0.072 0.25,0.023 0.124,0 0,0"/></g><g transform="translate(5.9995,20.9995)" id="g36"><path id="brow_6" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.124,0 -0.249,0.023 -0.371,0.072 -0.884,0.277 -1.133,0.859 -0.928,1.372 1.248,6.812 6.579,7.936 6.804,7.98 7.348,8.087 7.873,7.738 7.981,7.196 8.089,6.656 7.739,6.13 7.2,6.02 7.015,5.982 2.693,5.04 0.929,0.629 0.772,0.238 0.397,0.001 0,0"/></g><g transform="translate(19,15)" id="g40"><path id="mouth_5" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -3.623,0 -6.027,0.422 -9,1 -0.679,0.131 -2,0 -2,-2 0,-4 4.595,-9 11,-9 6.404,0 11,5 11,9 C 11,1 9.679,1.132 9,1 6.027,0.422 3.623,0 0,0"/></g><g transform="translate(10,14)" id="g44"><path id="mouth_6" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,0 3,-1 9,-1 6,0 9,1 9,1 0,0 -2,-4 -9,-4 -7,0 -9,4 -9,4"/></g><g transform="translate(11.8472,8.7705)" id="g48"><path id="tear_5" style="fill:#5dadec;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.68,-2.677 -3.4,-4.295 -6.077,-3.615 -2.676,0.678 -4.295,3.399 -3.615,6.076 0.679,2.677 6.337,8.708 7.307,8.462 C -1.417,10.677 0.679,2.677 0,0"/></g><g transform="translate(26.1328,8.7705)" id="g52"><path id="tear_6" style="fill:#5dadec;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0.68,-2.677 3.4,-4.295 6.077,-3.615 2.677,0.678 4.296,3.399 3.616,6.076 C 9.014,5.138 3.355,11.169 2.386,10.923 1.417,10.677 -0.679,2.677 0,0"/></g></g></g></g></svg>

  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;"
    xml:space="preserve" version="1.1" id="svg2">
    
    <metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,38 38,38 38,0 0,0 0,38 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10"><g id="head_3"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(36,19)" id="g20"><path id="path22" style="fill:#ffcc4d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-9.389 -7.611,-17 -17,-17 -9.388,0 -17,7.611 -17,17 0,9.388 7.612,17 17,17 C -7.611,17 0,9.388 0,0"/></g><g transform="translate(15,20.4639)" id="g24"><path id="eye_4" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C 0,-1.934 -1.119,-3.5 -2.5,-3.5 -3.881,-3.5 -5,-1.934 -5,0 -5,1.933 -3.881,3.5 -2.5,3.5 -1.119,3.5 0,1.933 0,0"/></g><g transform="translate(28,20.4639)" id="g28"><path id="eye_3" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C 0,-1.934 -1.119,-3.5 -2.5,-3.5 -3.881,-3.5 -5,-1.934 -5,0 -5,1.933 -3.881,3.5 -2.5,3.5 -1.119,3.5 0,1.933 0,0"/></g><g transform="translate(8,13.9639)" id="g32"><path id="mouth_3" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-3.964 4.596,-9 11,-9 6.404,0 11,5 11,9 0,0 -10.333,-2.756 -22,0"/></g><g transform="translate(13,12.083)" id="g36"><path id="tounge_3" style="fill:#e75a70;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 0,-6.083 c 0,-3 2,-6 6,-6 4,0 6,3 6,6 l 0,6.042 C 5.709,-1.333 0,0 0,0"/></g></g></g></g></svg>

  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;"
    xml:space="preserve" version="1.1" id="svg2">
    
    <metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,38 38,38 38,0 0,0 0,38 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10"><g id="head_1"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(36,19)" id="g20"><path id="path22" style="fill:#ffcc4d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-9.389 -7.611,-17 -17,-17 -9.389,0 -17,7.611 -17,17 0,9.389 7.611,17 17,17 C -7.611,17 0,9.389 0,0"/></g><g transform="translate(19,15.1514)" id="g24"><path id="mouth_1" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -2.966,0 -4.935,0.346 -7.369,0.819 -0.557,0.107 -1.638,0 -1.638,-1.637 0,-3.276 3.763,-7.37 9.007,-7.37 5.244,0 9.007,4.094 9.007,7.37 0,1.637 -1.082,1.745 -1.638,1.637 C 4.936,0.346 2.967,0 0,0"/></g><g transform="translate(17.6499,33.7192)" id="g28"><path id="eye_1" style="fill:#e75a70;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.859,2.431 -3.524,3.707 -5.956,2.85 -1.476,-0.521 -2.521,-1.711 -2.928,-3.105 -1.191,0.83 -2.751,1.1 -4.224,0.581 -2.431,-0.858 -3.708,-3.525 -2.85,-5.956 0.122,-0.345 0.284,-0.663 0.472,-0.958 1.951,-3.582 7.588,-6.1 11.002,-6.131 2.636,2.167 5.446,7.664 4.717,11.677 C 0.195,-0.694 0.12,-0.344 0,0"/></g><g transform="translate(20.3496,33.7192)" id="g32"><path id="eye_2" style="fill:#e75a70;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0.859,2.431 3.525,3.707 5.956,2.85 1.477,-0.521 2.521,-1.711 2.929,-3.105 1.191,0.83 2.751,1.1 4.224,0.581 2.43,-0.858 3.707,-3.525 2.85,-5.956 -0.123,-0.345 -0.284,-0.663 -0.473,-0.958 -1.951,-3.582 -7.588,-6.1 -11.002,-6.131 -2.636,2.167 -5.445,7.664 -4.716,11.677 C -0.194,-0.694 -0.119,-0.344 0,0"/></g></g></g></g>
</svg>

  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;"
    xml:space="preserve" version="1.1" id="svg2">
    
    <metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,38 38,38 38,0 0,0 0,38 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10"><g id="head_7"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(36,19)" id="g20"><path id="path22" style="fill:#da2f47;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-9.389 -7.611,-17 -17,-17 -9.388,0 -17,7.611 -17,17 0,9.388 7.612,17 17,17 C -7.611,17 0,9.388 0,0"/></g><g transform="translate(26.4854,7.1211)" id="g24"><path id="mouth_7" style="fill:#292f33;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.045,0.179 -1.168,4.379 -7.485,4.379 -6.318,0 -7.441,-4.2 -7.485,-4.379 -0.055,-0.217 0.043,-0.442 0.237,-0.554 0.195,-0.109 0.439,-0.079 0.599,0.077 0.019,0.019 1.954,1.856 6.649,1.856 4.694,0 6.63,-1.837 6.648,-1.856 0.096,-0.094 0.224,-0.144 0.352,-0.144 0.084,0 0.169,0.021 0.246,0.064 C -0.043,-0.445 0.055,-0.218 0,0"/></g><g transform="translate(16.707,19.707)" id="g28"><path id="eye_7" style="fill:#292f33;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -3.255,3.255 -8.486,3.293 -8.707,3.293 -0.552,0 -0.999,-0.447 -0.999,-0.999 -0.001,-0.551 0.446,-1 0.998,-1.001 0.029,0 1.925,-0.022 3.983,-0.737 -0.593,-0.64 -0.982,-1.634 -0.982,-2.763 0,-1.934 1.119,-3.5 2.5,-3.5 1.381,0 2.5,1.566 2.5,3.5 0,0.174 -0.019,0.34 -0.037,0.507 0.013,0 0.025,-0.007 0.037,-0.007 0.256,0 0.512,0.098 0.707,0.293 0.391,0.391 0.391,1.023 0,1.414"/></g><g transform="translate(30,23)" id="g32"><path id="eye_8" style="fill:#292f33;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.221,0 -5.451,-0.038 -8.707,-3.293 -0.391,-0.391 -0.391,-1.023 0,-1.414 C -8.512,-4.902 -8.256,-5 -8,-5 c 0.013,0 0.024,0.007 0.036,0.007 C -7.98,-5.16 -8,-5.326 -8,-5.5 -8,-7.434 -6.881,-9 -5.5,-9 c 1.381,0 2.5,1.566 2.5,3.5 0,1.129 -0.389,2.123 -0.982,2.763 C -1.924,-2.022 -0.028,-2 0.002,-2 0.553,-1.999 1,-1.55 0.999,-0.999 0.998,-0.447 0.552,0 0,0"/></g></g></g></g>
</svg>

  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;"
    xml:space="preserve" version="1.1" id="svg2">
    
    <metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,38 38,38 38,0 0,0 0,38 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10"><g id="head_9"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(36,19)" id="g20"><path id="path22" style="fill:#ffcc4d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-9.389 -7.611,-17 -17,-17 -9.388,0 -17,7.611 -17,17 0,9.388 7.612,17 17,17 C -7.611,17 0,9.388 0,0"/></g><g transform="translate(17.6641,26.457)" id="g24"><path id="eye_0" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.207,0.09 -0.451,0.03 -0.592,-0.148 -0.01,-0.012 -0.979,-1.202 -3.335,-1.844 -0.775,-0.212 -1.531,-0.319 -2.244,-0.319 -0.993,0 -1.559,0.212 -1.562,0.213 -0.21,0.084 -0.453,0.014 -0.587,-0.17 -0.135,-0.184 -0.128,-0.435 0.016,-0.611 0.071,-0.088 1.779,-2.148 4.124,-2.148 0.351,0 0.702,0.048 1.043,0.14 2.854,0.779 3.41,4.209 3.432,4.354 C 0.329,-0.309 0.207,-0.091 0,0"/></g><g transform="translate(28.6387,24.3022)" id="g28"><path id="eye_9" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.138,0.181 -0.38,0.245 -0.59,0.159 -0.006,-0.003 -0.633,-0.256 -1.737,-0.256 -0.661,0 -1.359,0.09 -2.073,0.266 C -6.77,0.751 -7.77,1.917 -7.777,1.927 -7.923,2.103 -8.165,2.16 -8.373,2.064 -8.58,1.969 -8.696,1.746 -8.656,1.522 c 0.026,-0.145 0.668,-3.56 3.539,-4.267 0.31,-0.076 0.629,-0.115 0.946,-0.115 2.397,0 4.099,2.159 4.17,2.252 C 0.138,-0.43 0.137,-0.18 0,0"/></g><g transform="translate(10.9985,27)" id="g32"><path id="brow_0" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.448,0 -0.855,0.303 -0.969,0.757 -0.134,0.535 0.19,1.077 0.724,1.212 0.036,0.01 3.593,0.962 5.352,4.478 C 5.354,6.941 5.953,7.143 6.449,6.895 6.943,6.648 7.143,6.047 6.896,5.553 4.715,1.191 0.425,0.075 0.244,0.03 0.162,0.009 0.081,0 0,0"/></g><g transform="translate(27,27)" id="g36"><path id="brow_9" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.08,0 -0.161,0.01 -0.242,0.03 -0.182,0.045 -4.472,1.161 -6.653,5.523 -0.247,0.494 -0.046,1.095 0.448,1.342 0.493,0.247 1.093,0.046 1.342,-0.448 C -3.348,2.93 0.21,1.979 0.246,1.969 0.779,1.832 1.104,1.289 0.968,0.754 0.853,0.302 0.447,0 0,0"/></g><g transform="translate(19,8.0352)" id="g40"><path id="mouth_9" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -3.623,0 -6.027,-0.422 -9,-1 -0.679,-0.131 -2,0 -2,2 0,4 4.595,9 11,9 C 6.404,10 11,5 11,1 11,-1 9.679,-1.132 9,-1 6.027,-0.422 3.623,0 0,0"/></g><g transform="translate(10.9995,12)" id="g44"><path id="mouth_0" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,0 3,1 8,1 5.001,0 8.001,-1 8.001,-1 0,0 -2,4 -8.001,4 C 2,4 0,0 0,0"/></g></g></g></g></svg>
    
  </div>

</body>
</html>